JavaScript 在网页中央弹出一个 div 元素

2023-03-26 06:28| 来源: 网络整理| 查看: 265

当前位置：主页 > 学无止境 > WEB前端 > JavaScript > Vue React JavaScript JavaScript 在网页中央弹出一个 div 元素作者：迹忆客最近更新：2023/03/22 浏览次数：

本篇文章将解决如何在网页中央打开一个弹出窗口。首先，我们有以下查询要在本文中解决：

什么是弹出窗口设计一个弹出窗口在 JavaScript 中打开和关闭弹出窗口使用 jQuery 打开和关闭弹出窗口什么是弹出窗口

弹出窗口是在底层内容之上的窗口上打开的小窗口或小框。

使用弹出窗口的主要用例是关注某些信息而不是整个内容，提示用户确认。或者，弹出窗口也称为模态框。

样式化弹出窗口

弹出窗口的样式很重要，唯一的原因是你希望它显示在主要内容之上，或者至少需要给人一种它在主要内容之上的错觉。我们将通过以下示例了解如何执行此操作：

html, body { height: 100%; } .overlay { position: absolute; display: none; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.8); z-index: 2; } .popup { position: absolute; width: 50%; height: 50%; top: 25%; left: 25%; text-align: center; background: white; } .popup h3 { font-size: 15px; height: 50px; line-height: 50px; color: black; } .CloseIcon{ cursor: pointer; } Document ✖ Popup Content Show PopUp

在这个简单的示例中，我们创建了一个显示弹出窗口的按钮。但最重要的是，我们有一个 overlay 元素，它会在所有内容之上以浅黑色显示，从而使用户难以看到该内容。

然后我们创建了一个 popup 元素并将其设置为位于 overlay 元素和网页中央的上方。在这样做的过程中，我们设法隐藏了主要内容。

当一个弹出窗口在屏幕中间打开时，它会引起用户的注意，因为这是用户唯一能清楚看到的东西。但是 overlay 元素被设置为 none，所以它现在不显示。

问题是，我们如何切换弹出窗口？我们可以通过使用 JavaScript 或 jQuery 来做到这一点。让我们在下面详细讨论两者。

在 JavaScript 中打开和关闭弹出窗口

我们可以使用 JavaScript 来切换弹出样式属性；我们可以通过访问 DOM 元素及其 style 属性并将 display 类型从 none 更改为 block 来做到这一点，这将使弹出窗口出现。

同样，一旦用户单击关闭图标，我们就可以改回 none。让我们用一个例子来说明这一点。

function OpenModal() { let element = document.getElementById('overlay') element.style.display = 'block' } function CloseModal() { let element = document.getElementById('overlay') element.style.display = 'none' } 使用 jQuery 打开和关闭弹出窗口

或者，我们可以用 jQuery 重复同样的事情。让我们看一下源代码和所需的更改。

function OpenModal() { $('#overlay').show(); } function CloseModal() { $('#overlay').hide(); }

在这个例子中，我们使用了 show 和 hide jQuery 方法。不是将 display 的属性从 none 更改为 block，show 删除 element 上的 display 属性，类似地，hide 将 display 属性设置为 none .

注意 show 仅适用于 display:none 或 jQuery 隐藏的项目；它不适用于 CSS 的 visibility 属性。

此外，使用 jQuery 时，请务必在标头中添加 jQuery CDN（或安装 jQuery 包）。

上一篇：JavaScript 有效变量名

下一篇：冒号 (:) 在 JavaScript 中有什么作用？

相关文章在 HTML 按钮中创建链接

发布时间：2023/03/23 浏览次数：169 分类：WEB前端

本教程演示了如何制作一个充当链接的 HTML 按钮

在 HTML 中的按钮之间添加空间

发布时间：2023/03/23 浏览次数：102 分类：WEB前端

本文介绍如何在两个并排的 HTML 按钮之间增加空间。

在 HTML 中打印页面

发布时间：2023/03/23 浏览次数：78 分类：WEB前端

本教程介绍如何在 HTML 中打印特定页面。

在 HTML 中创建电话号码链接

发布时间：2023/03/23 浏览次数：123 分类：WEB前端

本教程介绍了为电话号码创建超链接以及使用 HTML 从移动设备呼叫电话号码的方法。

在 HTML 中编写撇号

发布时间：2023/03/23 浏览次数：73 分类：WEB前端

本教程介绍如何在 HTML 中写撇号。

HTML 中的转义字符

发布时间：2023/03/23 浏览次数：111 分类：WEB前端

本教程介绍了字符转义以及 HTML 中要转义的字符。

在 HTML 中创建垂直线

发布时间：2023/03/23 浏览次数：152 分类：WEB前端

本教程介绍如何在 HTML 中创建垂直线。

在 HTML 中跳过一行

发布时间：2023/03/23 浏览次数：179 分类：WEB前端

本教程介绍如何在 HTML 中跳过一行。

在 HTML 中添加悬停文本

发布时间：2023/03/23 浏览次数：84 分类：WEB前端

本教程介绍如何在 HTML 中添加悬停文本。

转载请发邮件至 [email protected] 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

【本文地址】

公司简介

联系我们